<script setup lang="ts">
import { useDeatilStore } from '@/store';

const detailStore=useDeatilStore()
</script>

<template>
  <div class="detail">
    <div class="header">
      <span class="header_title">{{detailStore.detailList?.hospital.hosname}}</span>
      <div class="icon_content">
        <svg t="1727878202438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5217" width="16" height="16"><path d="M853.3 874.7H170.7c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h682.7c23.6 0 42.7 19.1 42.7 42.7-0.1 23.6-19.2 42.7-42.8 42.7zM298.7 661.3V192c0-23.6-19.1-42.7-42.7-42.7s-42.7 19.1-42.7 42.7v469.3c0 23.6 19.1 42.7 42.7 42.7s42.7-19.1 42.7-42.7z m256 0V320c0-23.6-19.1-42.7-42.7-42.7s-42.7 19.1-42.7 42.7v341.3c0 23.6 19.1 42.7 42.7 42.7s42.7-19.1 42.7-42.7z m256 0V448c0-23.6-19.1-42.7-42.7-42.7s-42.7 19.1-42.7 42.7v213.3c0 23.6 19.1 42.7 42.7 42.7s42.7-19.1 42.7-42.7z" p-id="5218" fill="#999999"></path></svg>
        <span>{{detailStore.detailList?.hospital.param.hostypeString}}</span>
      </div>
    </div>
    <div class="info">
      <img :src="`data:image/jpeg;base64,${detailStore.detailList?.hospital.logoData}`" alt="">
      <div class="content">
        <svg t="1728223680959" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20611" width="30" height="30"><path d="M249.6 417.088l319.744 43.072 39.168 310.272L845.12 178.88z m-129.024 47.168a32 32 0 0 1-7.68-61.44l777.792-311.04a32 32 0 0 1 41.6 41.6l-310.336 775.68a32 32 0 0 1-61.44-7.808L512 516.992z" p-id="20612" fill="#333333"></path></svg>
        <span>{{detailStore.detailList?.hospital.route}}</span>
      </div>
    </div>
    <div class="detail">
      <div class="title">医院介绍</div>
      <div>{{ detailStore.detailList?.hospital.intro }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.detail {
  .header {
    display: flex;
    .header_title {
      color: #333;
      font-size: 20px;
      font-weight: 700;
      margin-right: 15px;
    }
    .icon_content {
      display: flex;
      align-items: center;
      svg {
        margin-right:3px ;
      }
      span {
        color: #999;
        font-size: 14px;
      }
    }
  }
  .info {
    display: flex;
    align-items: center;
    margin-top: 30px;
    img {
      width: 80px;
      height: 80px;
    }
    .content {
      margin-left: 30px;
      padding-bottom: 30px;
      display: flex;
      svg {
        margin:3px 10px 0 0;
      }
      span {
        display: flex;
        flex-wrap: nowrap;
        color: #333;
        font-size: 14px;
      }
    }
  }
  .detail {
    margin-top: 40px;
    .title {
      color: #333;
      font-weight: 700;
    }
  }
}
</style>